@keyframes hatBreath {
  0% {
    transform: translateY(0%) scaleY(1);
  }

  15% {
    transform: translateY(2%);
  }

  25% {
    transform: translateY(0%) scaleY(1);
  }

  35% {
    transform: translateY(2%);
  }

  50% {
    transform: translateY(0%) scaleY(1);
  }

  100% {
    transform: translateY(0%) scaleY(1);
  }
}

@keyframes hammer {
  0% {
    // top: 32%;
    transform: translateY(0%) skewY(0deg);
  }

  50% {
    // top: 22%;
    transform: translateY(-15%) skewY(24deg);
  }

  100% {
    // top: 32%;
    transform: translateY(0%) skewY(0deg);
  }
}

@keyframes handHammer {
  0% {
    // top: 32%;
    transform: translateY(0);
  }

  50% {
    // top: 13%;
    transform: translateY(-150%);
  }

  100% {
    // top: 32%;
    transform: translateY(0);
  }
}

@keyframes bambooHammer {
  0% {
    // top: -2%;
    transform: translateY(-2%);
  }

  50% {
    // top: -19%;
    transform: translateY(-19%);
  }

  100% {
    // top: -2%;
    transform: translateY(-2%);
  }
}

@keyframes halo {
  0% {
    visibility: visible;
    transform: scale(1);
    // top: 93%;
    // left: -4%;
    // width: 15%;
    // height: 6%;
  }

  50% {
    transform: scale(6);
    // top: 83%;
    // left: -28%;
    // width: 63%;
    // height: 27%;
  }

  100% {
    visibility: visible;
    transform: scale(1);
    // top: 93%;
    // left: -4%;
    // width: 15%;
    // height: 6%;
  }
}

.owl.guard {
  .halo {
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 93%;
    left: -4%;
    width: 15%;
    height: 6%;
    background: radial-gradient(rgba(244, 195, 111, .7), transparent);
    border-radius: 50%;
  }

  .health {
    top: -22%;
  }

  .ripple {
    visibility: hidden;
    position: absolute;
    top: 96%;
    left: 3%;
    width: 15%;
    height: 6%;
    border: 1px solid rgba(144, 98, 66, .3);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);

    .ripple-1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 64%;
      border: 1px solid rgba(144, 98, 66, .7);
      border-radius: 50%;

      .ripple-2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 35%;
        border: 1px solid rgba(144, 98, 66, 1);
        border-radius: 50%;
      }
    }
  }

  &.fighting .halo {
    // animation: halo .2s linear 1 .3s;
  }

  &.fighting .ripple {
    opacity: .2;
    visibility: visible;
    transform: translate(-50%, -50%) scale(6);
    // width: 80%;
    // height: 50%;
    // border: 3px solid rgba(144, 98, 66, .3);
    transition: all .3s linear .3s;
    // animation: halo .2s linear 1 .3s;

    // .ripple-1 {
    //   width: 70%;
    //   height: 64%;
    //   border: 3px solid rgba(144, 98, 66, .7);

    //   .ripple-2 {
    //     width: 50%;
    //     height: 54%;
    //     border: 3px solid rgba(144, 98, 66, 1);
    //   }
    // }
  }

  .body {
    .hat {
      position: absolute;
      left: 19.7%;
      top: -11%;
      height: 43%;
    }

    .clothes {
      position: absolute;
      left: 21.3%;
      top: 42.5%;
      height: 47.5%;
    }
  }

}

.owl.fly {
  .body {
    .wings.folded {
      visibility: hidden;
    }
  }
}